<template>
  <div class="home">
    <!-- 搜索 -->
    <van-search
      @focus="$router.push('/search')"
      background="#fff"
      shape="round"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-image
          width="70"
          height="25"
          src="http://47.115.51.185//uploads/attach/2021/04/20210407/ef7e2b395c2530647be1a8c2996df91b.png"
        />
      </template>
    </van-search>

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      autoplay="3000"
      @change="changebanner"
      :loop="bannerloop"
    >
      <van-swipe-item v-for="item in banner" :key="item.id">
        <van-image class="auto-img" :src="item.pic" />
      </van-swipe-item>
      <template #indicator>
        <div class="banner-cir">
          <span
            v-for="i in banner.length"
            :key="i"
            :style="{
              backgroundColor: i == bannerindex ? 'rgba(255,0,0,0.5)' : '',
            }"
          ></span>
        </div>
      </template>
    </van-swipe>

    <!-- 商品分类 -->
    <van-grid icon-size="40" :border="gridborder">
      <van-grid-item
        v-for="item in menus"
        :key="item.id"
        :icon="item.pic"
        :text="item.name"
        :to="item.wap_url"
      />
    </van-grid>

    <!-- 通知栏 -->
    <van-notice-bar
      background="none"
      left-icon="volume-o"
      :scrollable="false"
      class="notice-bar"
    >
      <template #left-icon>
        <div class="picture">
          <van-image
            width="70"
            height="15"
            src=""
          >
          </van-image>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" color="black" />
      </template>
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item v-for="item in roll" :key="item.id">
          <router-link :to="item.wap_url" tag="span">
            {{ item.info }}
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </van-notice-bar>

    <!-- 左右滑动 -->

    <div class="wrapper">
      <div class="wrapper-top">
        <div class="wrapper-left">
          <div class="wrapper-title">快速选择</div>
          <div class="wrapper-name">{{ info.fastInfo }}</div>
        </div>
        <router-link tag="div" :to="`/category`" class="wrapper-right">
          更多
          <van-icon name="arrow" color="black" />
        </router-link>
      </div>
      <div class="wrapper-content">
        <div class="swiper-box">
          <ul class="fast-list">
            <router-link tag="li"
            :to="{
              path:'/goodList',
              query:{id:item.id,title:item.cate_name}
            }"
              v-for="(item, index) in info.fastList"
              :key="index"
              :class="[index % 2 == 0 ? 'bottomblue' : 'bottmorange']"
            >
              <img :src="item.pic" alt="" class="fast-img" />
              <div class="fast-title">{{ item.cate_name }}</div>
            </router-link>
          </ul>
        </div>
      </div>
    </div>

    <!-- 精品推荐 -->
    <div class="wrapper">
      <div class="wrapper-top">
        <div class="wrapper-left">
          <div class="wrapper-title">快速选择</div>
          <div class="wrapper-name">{{ info.fastInfo }}</div>
        </div>
        <div class="wrapper-right">
          更多
          <van-icon name="arrow" color="black" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="wrapper-swipe">
        <van-swipe class="my-swipe" autoplay="3000">
          <van-swipe-item v-for="item in info.bastBanner" :key="item.id">
            <van-image class="auto-img" :src="item.img" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 商品详情  info.bastList-->
   
    <ProductList :productList="info.bastList"></ProductList>
    <!-- 热门榜单 -->
    <div class="hotlist-box">
      <div class="hotlist-top">
        <div class="hotlist-bg">
          <div class="hotlist-text">
            <div class="hotlist-title">热门榜单</div>
            <div class="hotlist-name">根据销量、搜索、好评等综合得出</div>
            <div class="hotlist-more">
              更多
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
      <div class="hotlist-bottom">
        <router-link tag="div" :to="`/detail/${item.id}`" class="hot-content" v-for="item in likeInfo" :key="item.id">
          <div class="hot-img">
            <img :src="item.image" />
          </div>
          <div class="hot-title">{{ item.store_name }}</div>
          <div class="hot-price">￥{{ item.price }}</div>
        </router-link>
      </div>
    </div>

    <!-- 首发新品 -->
    <div class="wrapper">
      <div class="wrapper-top">
        <div class="wrapper-left">
          <div class="wrapper-title">
            首发新品
            <div class="wrapper-new">New~</div>
          </div>
          <div class="wrapper-name">{{ info.fastInfo }}</div>
        </div>
        <div class="wrapper-right">
          更多
          <van-icon name="arrow" color="black" />
        </div>
      </div>
      <div class="wrapper-content">
        <div class="swiper-box">
          <ul class="fast-list">
            <router-link  tag="li" :to="`/detail/${item.id}`"  v-for="(item, index) in info.firstList" :key="index">
              <img :src="item.image" alt="" class="fast-img" />
              <div class="fast-title">{{ item.store_name }}</div>
              <div class="fast-price">{{ item.price }}</div>
            </router-link>
          </ul>
        </div>
      </div>

      
    </div>

    <!-- 促销商品 -->
     <div class="wrapper">
      <div class="wrapper-top">
        <div class="wrapper-left">
          <div class="wrapper-title">
            促销商品
          </div>
          <div class="wrapper-name">{{ info.salesInfo }}</div>
        </div>
        <div class="wrapper-right">
          更多
        <van-icon name="arrow" color="black" />
        </div>
      </div>
       <router-link tag="div" :to="`/detail/${item.id}`" class="shop-box" v-for="item in benefit" :key="item.id">
      <div class="shop-left">
        <img :src="item.image" />
      </div>
      <div class="shop-right">
        <div class="shop-title">
          {{item.store_name}}
        </div>
        <div class="shop-cuxiao">促销价:￥{{item.price}}</div>
        <div class="shop-daily">
          <div class="shop-daily-price">日常价:￥{{item.ot_price}}</div>
          <div class="shop-daily-total">仅剩:{{item.stock}}</div>
        </div>
      </div>
       </router-link>
    </div>
  </div>
</template>

<script>
import ProductList from '@/components/productList.vue'
export default {
  name: "Home",
  data() {
    return {
      // 轮播图信息
      banner: [],
      bannerindex: 1,
      // 控制轮播图是否循环播放
      bannerloop: true,

      // 商品分类
      menus: [],
      // 控制商品分類是否显示边框
      gridborder: false,

      // 新闻简报
      roll: [],

      // 商品推荐 总数据
      info: [],

      // 热门榜单
      likeInfo: [],

      // 促销单品
      benefit:[]
    };
  },
  components: {
    ProductList
  },

  created() {
    this.axios.get("api/index").then((res) => {
      // console.log(res);
      this.banner = res.data.data.banner;
      this.menus = res.data.data.menus;
      this.roll = res.data.data.roll;
      this.info = res.data.data.info;
      this.likeInfo = res.data.data.likeInfo;
      this.benefit=res.data.data.benefit;
      // console.log(this.info);
    });
  },
  methods: {
    // 自定义轮播图下标
    changebanner(e) {
      // console.log(e);
      this.bannerindex = e + 1;
    },
  },
};
</script>


<style lang="less" scoped>
.banner-cir {
  position: absolute;
  // width: 100%;
  left: 50%;
  bottom: 10%;
  z-index: 1;
  transform: translate(-100%);
  text-align: center;
  display: flex;
  justify-content: center;
  span {
    display: block;
    width: 10px;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-left: 5px;
  }
}

.auto-img {
  height: 148px !important;
}

.notice-bar {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;

  .notice-swipe {
    height: 40px;
    line-height: 40px;

    span {
      color: #999;
      margin-left: 20px;
      font-size: 0.24rem;
    }
  }
}

.picture {
  width: 80px;
  border-right: 1px solid #ddd;
  display: flex;
}

.wrapper {
  padding: 10px 10px;
  .wrapper-top {
    display: flex;
    align-items: center;
    .wrapper-left {
      .wrapper-title {
        display: flex;
        color: #282828;
        font-size: 16px;
        font-weight: 700;
        .wrapper-new {
          margin-left: 5px;
          color: #fc4141;
        }
      }
      .wrapper-name {
        margin-top: 3px;
        font-size: 0.24rem;
        color: #999;
      }
    }
    .wrapper-right {
      margin-left: auto;
      color: #333;
      font-size: 12px;
    }
  }
  .swiper-box {
    // height: 222px;
    width: 100%;
    background-color: #ffffff;
    margin-top: 10px;
    .fast-list {
      white-space: nowrap;
      margin-top: 0.38rem;
      display: flex;
      border: 1px solid #f5f5f5;
      overflow: scroll;
      li {
        width: 20vw;
        margin-right: 23px;
      }
      .fast-img {
        width: 5.625rem;
        height: 5.625rem;
        border-radius: 0.06rem 0.06rem 0 0;
      }
      .fast-title {
        text-align: center;
        font-size: 0.24rem;
        color: #282828;
        text-align: center;
        border: 1px solid #f5f5f5;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-bottom: 0;
        border-top: 0;
      }
      .fast-price {
        text-align: center;
        color: #fc4141 !important;
        font-weight: 700;
        font-size: 12px;
      }
    }
  }
  .wrapper-swipe {
    padding-top: 10px;
  }
}

.bottomblue {
  border-bottom: 2px solid #a3c8ff;
}
.bottmorange {
  border-bottom: 2px solid #ffada8;
}

.home {
  padding-bottom: 50px;
}

.shop-box {
  display: flex;
  padding: 10px 10px;
  border-bottom: 1px solid #e8e8e8;
  .shop-left {
    width: 90px;
    height: 90px;
    img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 6px;
    }
  }
  .shop-right {
    position: relative;
    width: 70%;
    margin-left: 20px;
    .shop-cuxiao{
      font-size: 11px;
      padding: 5px 0px;
      width: 50%;
      margin-top: 8%;
      text-align: center;
      background-color: rgb(255,82,54);
      color: white;
      border-radius: 14px 0px 14px 0px;

    }
    .shop-daily{
      margin-top: 8%;

      display: flex;
      .shop-daily-price{
        color: #999;
        font-size: 10px;
        text-decoration: line-through;
      }
      .shop-daily-total{
        color: #999;
        font-size: 10px;
        margin-left: auto;
      }
      
    }
    .shop-title {
      // color: #888;
      text-align: left;
      width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .shop-price {
      margin-top: 20px;
      color: #fc4141;
      font-size: 15px;
    }
    .shop-vip {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .shop-vip-price {
        color: #282828;
        font-size: 10px;
        font-weight: 700;
      }
      .shop-total {
        color: #999;
        font-size: 10px;
        margin-left: 10px;
      }
      .shop-vip-icon {
        width: 23px;
        height: 10.5px;
        margin-left: 5px;

        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }

    .shop-cart {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

.hotlist-box {
  // position: relative;
  padding-bottom: 10px;
  .hotlist-top {
    // width: 100%;
    .hotlist-bg {
      // width: 100%;
      height: 18vh;
      padding: 10px;
      background-image: url(../assets/hot-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .hotlist-text {
        display: flex;
        justify-content: center;
        align-items: center;

        .hotlist-title {
          color: #fff;
          font-weight: 700;
          font-size: 18px;
        }
        .hotlist-name {
          margin-left: 8px;
          color: #fff;
          font-size: 11px;
        }
        .hotlist-more {
          margin-left: auto;
          color: #fff;
          font-size: 16px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .hotlist-bottom {
    // position: relative;
    // left: 18px;
    // top: -100px;
    width: 90%;
    margin-top: -95px;
    margin-left: 18px;
    z-index: 2;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-around;
    .hot-content {
      width: 30%;
      margin-top: 10px;
      .hot-img {
        width: 100%;
        img {
          width: 100px;
          height: 100px;
          display: block;
          border-radius: 6px;
        }
      }
      .hot-title {
        text-align: left;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;
      }
      .hot-price {
        color: #fc4141 !important;
        font-weight: 700;
        padding-bottom: 10px;
      }
    }
  }
}
</style>